<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的小说 - AI网文小说创作助手</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link href="mobile-common.css" rel="stylesheet">
</head>
<body>
    <div class="mobile-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">
                <span class="status-bar-time">9:41</span>
            </div>
            <div class="status-bar-right">
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-2"></i>
                <i class="fas fa-battery-full ml-2 status-bar-battery"></i>
            </div>
        </div>
        
        <!-- 导航栏 -->
        <div class="nav-bar">
            <div class="nav-left"></div>
            <div class="nav-title">我的小说</div>
            <div class="nav-right">
                <i class="fas fa-search"></i>
            </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="content">
            <!-- 筛选标签 -->
            <div class="mb-4 overflow-x-auto">
                <div class="flex space-x-2 pb-1">
                    <button class="btn btn-primary btn-sm">全部</button>
                    <button class="btn btn-outline btn-sm">连载中</button>
                    <button class="btn btn-outline btn-sm">已完结</button>
                    <button class="btn btn-outline btn-sm">男频</button>
                    <button class="btn btn-outline btn-sm">女频</button>
                    <button class="btn btn-outline btn-sm">玄幻</button>
                    <button class="btn btn-outline btn-sm">都市</button>
                    <button class="btn btn-outline btn-sm">仙侠</button>
                </div>
            </div>
            
            <!-- 小说列表 -->
            <div class="mb-4">
                <!-- 小说卡片 1 -->
                <div class="card mb-3">
                    <div class="flex p-4">
                        <div class="w-16 h-20 bg-cover bg-center rounded mr-3" style="background-image: url('https://images.unsplash.com/photo-1518826778770-a729fb53c3c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80')"></div>
                        <div class="flex-1">
                            <div class="flex justify-between items-start">
                                <h3 class="font-bold">情感读心者</h3>
                                <span class="badge badge-primary">连载中</span>
                            </div>
                            <div class="text-xs text-secondary mb-2">都市异能 | 32,456字 | 8/30章</div>
                            <p class="text-sm mb-2 line-clamp-2">大学生李天阳在一次偶然的机会下获得了一个神秘的系统，可以看到他人的情感值。从此，他的生活发生了翻天覆地的变化，不仅能够轻松应对各种人际关系，还能在危机时刻洞察他人的真实想法。</p>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-secondary">3天前更新</span>
                                <div class="flex space-x-2">
                                    <a href="novel-view.html" class="btn btn-sm btn-outline p-1 px-2">
                                        <i class="fas fa-book-open"></i>
                                    </a>
                                    <a href="novel-edit.html" class="btn btn-sm btn-outline p-1 px-2">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <button class="btn btn-sm btn-outline p-1 px-2" onclick="showDeleteConfirm()">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 小说卡片 2 -->
                <div class="card mb-3">
                    <div class="flex p-4">
                        <div class="w-16 h-20 bg-cover bg-center rounded mr-3" style="background-image: url('https://images.unsplash.com/photo-1511300636408-a63a89df3482?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80')"></div>
                        <div class="flex-1">
                            <div class="flex justify-between items-start">
                                <h3 class="font-bold">修真归来</h3>
                                <span class="badge badge-success">已完结</span>
                            </div>
                            <div class="text-xs text-secondary mb-2">都市修真 | 128,765字 | 30/30章</div>
                            <p class="text-sm mb-2 line-clamp-2">叶辰在修真界修炼千年，因一场大战意外跌落凡间，重回都市。且看他如何凭借强大的修为，在都市中纵横捭阖，成就一段传奇人生。</p>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-secondary">1个月前更新</span>
                                <div class="flex space-x-2">
                                    <a href="novel-view.html" class="btn btn-sm btn-outline p-1 px-2">
                                        <i class="fas fa-book-open"></i>
                                    </a>
                                    <a href="novel-edit.html" class="btn btn-sm btn-outline p-1 px-2">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <button class="btn btn-sm btn-outline p-1 px-2" onclick="showDeleteConfirm()">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 小说卡片 3 -->
                <div class="card mb-3">
                    <div class="flex p-4">
                        <div class="w-16 h-20 bg-cover bg-center rounded mr-3" style="background-image: url('https://images.unsplash.com/photo-1531306728370-e2ebd9d7bb99?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80')"></div>
                        <div class="flex-1">
                            <div class="flex justify-between items-start">
                                <h3 class="font-bold">星际猎手</h3>
                                <span class="badge badge-primary">连载中</span>
                            </div>
                            <div class="text-xs text-secondary mb-2">科幻 | 56,789字 | 12/40章</div>
                            <p class="text-sm mb-2 line-clamp-2">2150年，人类已经开始星际殖民。林星是一名星际猎手，专门猎取各种稀有资源和生物。在一次任务中，他发现了一个可能改变整个宇宙格局的秘密。</p>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-secondary">1周前更新</span>
                                <div class="flex space-x-2">
                                    <a href="novel-view.html" class="btn btn-sm btn-outline p-1 px-2">
                                        <i class="fas fa-book-open"></i>
                                    </a>
                                    <a href="novel-edit.html" class="btn btn-sm btn-outline p-1 px-2">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <button class="btn btn-sm btn-outline p-1 px-2" onclick="showDeleteConfirm()">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 小说卡片 4 -->
                <div class="card mb-3">
                    <div class="flex p-4">
                        <div class="w-16 h-20 bg-cover bg-center rounded mr-3" style="background-image: url('https://images.unsplash.com/photo-1579547945413-497e1b99dac0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80')"></div>
                        <div class="flex-1">
                            <div class="flex justify-between items-start">
                                <h3 class="font-bold">重生之商业帝国</h3>
                                <span class="badge badge-primary">连载中</span>
                            </div>
                            <div class="text-xs text-secondary mb-2">都市重生 | 78,234字 | 15/35章</div>
                            <p class="text-sm mb-2 line-clamp-2">商业奇才张明在人生巅峰时意外身亡，重生回到大学时代。凭借前世的经验和记忆，他开始了新的创业之路，一步步打造自己的商业帝国。</p>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-secondary">5天前更新</span>
                                <div class="flex space-x-2">
                                    <a href="novel-view.html" class="btn btn-sm btn-outline p-1 px-2">
                                        <i class="fas fa-book-open"></i>
                                    </a>
                                    <a href="novel-edit.html" class="btn btn-sm btn-outline p-1 px-2">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <button class="btn btn-sm btn-outline p-1 px-2" onclick="showDeleteConfirm()">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 创建新小说按钮 -->
            <div class="fixed bottom-24 right-4">
                <a href="create.html" class="w-14 h-14 rounded-full bg-primary flex items-center justify-center text-white shadow-lg">
                    <i class="fas fa-plus text-xl"></i>
                </a>
            </div>
        </div>
        
        <!-- 底部标签栏 -->
        <div class="tab-bar">
            <a href="home.html" class="tab-item" data-tab="home">
                <i class="fas fa-home tab-icon"></i>
                <span>首页</span>
            </a>
            <a href="novel-list.html" class="tab-item active" data-tab="novels">
                <i class="fas fa-book tab-icon"></i>
                <span>我的小说</span>
            </a>
            <a href="create.html" class="tab-item" data-tab="create">
                <i class="fas fa-plus-circle tab-icon"></i>
                <span>创作</span>
            </a>
            <a href="inspiration.html" class="tab-item" data-tab="inspiration">
                <i class="fas fa-lightbulb tab-icon"></i>
                <span>灵感</span>
            </a>
            <a href="profile.html" class="tab-item" data-tab="profile">
                <i class="fas fa-user tab-icon"></i>
                <span>我的</span>
            </a>
        </div>
    </div>
    
    <script src="mobile-common.js"></script>
    <script>
        // 显示删除确认对话框
        function showDeleteConfirm() {
            showConfirm('删除小说', '确定要删除这部小说吗？此操作无法撤销。', '删除', '取消')
                .then(result => {
                    if (result) {
                        showToast('小说已删除', 'success');
                    }
                });
        }
    </script>
    <style>
        /* 额外样式 */
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .overflow-x-auto {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .overflow-x-auto::-webkit-scrollbar {
            display: none;
        }
        
        .overflow-x-auto > div {
            min-width: max-content;
        }
    </style>
</body>
</html> 